<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false"
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="uni-list">
			<view class="uni-list-cell" v-for="(item,index) in aList" :key="index" @click="articleClick(item)">
				<view class="uni-media-list">
					<image class="uni-media-list-logo" :src="item.articleImage" mode=""></image>
					<view class="uni-media-list-body">
						<view class="uni-media-list-text-top">
							{{item.articleTitle}}
						</view>
						<view class="uni-media-list-text-bottom">
							<text></text>
							<text>{{item.createtime_text}}</text>
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="status" :content-text="contentText" />
		</view>
		
	</view>
</template>

<script>
	import {aList} from '@/api/art.js';
	export default {
			components: {},
			data() {
				return {
					navstyle: {
						title: "新闻列表",
						txtColor: "#333333",
						bgColor: "#FFFFFF",
						leftIcon: "arrow-left",
					},
					titleStyle: {
						fontWeight: 700
					},
					status: 'more',
					contentText: {
						contentdown: '没有更多数据了',
						contentrefresh: '加载中',
						contentnomore: '没有更多数据了'
					},
					aList:[]
				}
			},
			onLoad() {
				aList().then(response=>{
					this.aList = response.data;
					console.log(this.aList)
				});
			},
			methods: {
				leftClick() {
					uni.reLaunch({
					  url: '/pages/index/user' // 替换成上一页的路径
					});
				},
				articleClick(item){
					uni.redirectTo({
						url: `/pages/art/index?articleId=${item.articleId}`
					});
				}
				
			}
		}
</script>

<style>
	.uni-list {
	    background-color: #fff;
	    position: relative;
	    display: flex;
	    flex-direction: column;
	}
	.uni-list-cell{
	    position: relative;
	    display: flex;
		border-bottom: 1px solid #ccc;
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	}
	.uni-media-list {
	    padding: 11px 16px;
	    box-sizing: border-box;
	    display: flex;
	    width: 100%;
	    flex-direction: row;
	}
	.uni-media-list-logo{
	    width: 66px;
	    height: 66px;
	    margin-right: 10px;
	}
	.uni-media-list-body {
		height: auto;
		justify-content: space-around;
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: flex-start;
		overflow: hidden;
	}
	.uni-media-list-text-top {
	    height: 37px;
	    font-size: 14px;
	    overflow: hidden;
	}
	.uni-media-list-text-bottom{
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between;
		width: 100%;
		line-height: 16px;
		font-size: 13px;
		color: #8f8f94;
	}
</style>